<template>
  <!-- 货源服务 -->
  <view class="link-container link-list">
    <view class="h2-title">{{ title }}</view>

    <!-- 功能版块链接 -->
    <view class="module-link flex flex-ai-c">
      <block v-for="(ser, i) in data" :key="ser.label">
        <view @click="goPage(ser.path)" class="link-item flex flex-dir-c flex-ai-c" :class="auth ? 'item-w-25':'item-w-20'">
          <i-icon :icon="ser.icon" :color="ser.color" size="52rpx"></i-icon>
          <text class="text">{{ ser.label }}</text>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
	name: 'link-card',
  props: {
    title: {
      type: String,
      default: '设置标题',
    },
    
    auth: {
      type: String,
      default: ''
    },

    data: {
      type: Array,
      default: () => []
    }
  },
  
  methods: {
    goPage(page) {
      if (page === '#') {
        uni.showToast({
          title: '敬请期待',
          icon: 'none'
        })
      } else {
        uni.navigateTo({
          url: page
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.link-container {
	.h2-title {
		padding: 30rpx 0;
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
	}
}

.link-list {
	padding: 0 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	
	.module-link {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.link-item {
			// width: 20%;
			margin-bottom: 32rpx;
			
			// 根据颜色遍历，设置不同图标的颜色
			$colors: #fa763e #ffc20e #43a0fc #f96a56 #08c182;

			@for $i from 1 to length($colors)+1 {
				.icons-#{$i} {
					// font-size: 52rpx;
					color: nth($colors, $i);
				}
			}
			
			.text {
				margin-top: 16rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
		}
    
    .item-w-20 {
      width: 20%;
    }
    .item-w-25 {
      width: 25%;
    }
	}
}
</style>